<template>
  <!-- 对话框(添加 / 修改) -->
  <!-- 添加 -->
  <el-dialog
    title="请假申请"
    :visible.sync="show"
    width="600px"
    append-to-body
    :before-close="cancel"
    :close-on-click-modal="false"
  >
    <div class="app-container">
      <!-- 对话框(添加 / 修改) -->
      <el-form
        ref="form"
        :model="createleave"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="请假类型" prop="reasonId">
          <el-select v-model="createleave.reasonId" placeholder="请选择">
            <el-option
              v-for="item in leaveTypeList"
              :key="item.id"
              :label="item.leaveReason"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="请假时间" prop="qjtime">
          <el-date-picker
            v-model="createleave.qjtime"
            type="datetimerange"
            value-format="yyyy-MM-dd[T]HH:mm:ss.sss[Z]"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getLeaveDays"
            size="small"
            class="leaveDate"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="请假天数" prop="leaveDays">
          <el-input v-model="createleave.leaveDays" disabled size="small" />
        </el-form-item>
        <el-form-item label="请假说明" prop="leaveExplain">
          <el-col :span="24">
            <el-input
              type="textarea"
              :rows="3"
              v-model="createleave.leaveExplain"
              placeholder="请输入请假说明"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="审核人" prop="copySendId">
          <el-select
            v-model="createleave.copySendId"
            filterable
            remote
            placeholder="请选择审核人"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.nickname"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-dialog>
</template>

<script>
import {
  getLeavePage,
  createLeave,
  getTeacherBossUser,
  getLeaveType
} from "@/api/teacherSide/leave";
// import Editor from "@/components/Editor";
// import common from "@/api/collegebase/common";
export default {
  name: "leaveEdit",
  components: {
    // Editor,
  },
  props: {
    // 是否显示弹出层
    show: {
      type: Boolean,
      default: false,
    },
    // 显示弹出层标题
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 表单参数
      createleave: {
        leaveDays: undefined,
        leaveExplain: undefined,
        copySendId: undefined,
        reasonId: undefined,
        qjtime: []
      },
      //搜索下拉所需
      options: [],
      value: [],
      list: [],
      loading: false,
      // 请假类型
      leaveTypeList: [],
      // 表单校验
      rules: {
        qjtime: [
          { required: true, message: "请假时间不能为空", trigger: "blur" },
        ],
        leaveDays: [
          { required: true, message: "请输入请假天数", trigger: "change" },
        ],
        copySendId: [
          { required: true, message: "请选择抄送人", trigger: "change" },
        ],
        reasonId: [{ required: true, message: "请假事由不能为空", trigger: "change" }],
        leaveExplain: [
          { required: true, message: "请假说明不能为空", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getLeaveTypeList();
    this.remoteMethod();
  },

  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        createLeave({ ...this.createleave, userId: this.$store.getters.userId, userType: 3 }).then((res) => {
          // console.log("111111111", res);
          this.$modal.msgSuccess("提交成功");
          this.$emit("success");
          this.cancel()
          //    this.getList()
        });
      });
    },
    getLeaveTypeList() {
      getLeaveType().then(res => {
        this.leaveTypeList = res.data
      })
    },
    remoteMethod() {

      let userId = this.$store.getters.userId;
      getTeacherBossUser({ id: userId }).then((res) => {
        this.options = res.data;
        //审批人不能显示自己
        this.options = this.options.filter(item => item.id != userId);
      });

    },
    cancel() {
      this.$emit("update:show", false);
      this.createleave = {
        leaveDays: undefined,
        leaveExplain: undefined,
        copySendId: undefined,
        reasonId: undefined,
        qjtime: undefined,
      }

    },
    //获取日期组件选择
    getLeaveDays(data) {
      let start = new Date(data[0]).getTime();
      let end = new Date(data[1]).getTime();
      console.log("start", start, end);
      this.createleave.leaveStartTime = start;
      this.createleave.leaveEndTime = end;
      let times = end - start;
      let day = (times / (24 * 1000 * 3600)).toFixed(1);
      this.createleave.leaveDays = day;
    },
  },
};
</script>
